<link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css">
<link rel="stylesheet" href="/css/upload.css">

<div id="activityForm" class="activity-form">
    <div class="form-item">
        <div class="item-title">
            <span>*</span>活动名称
        </div>
        <input type="text" class="item-input" placeholder="请输入活动名称" v-model="form.title" maxlength="20">
    </div>
    <div class="form-item">
        <div class="item-title">
            顶部背景图
        </div>
        <div class="upload-wrap">
            <div class="image-item" v-if="form.fileId1">
                <img class="item-img" :src="imgUrlHandle(form.fileId1)"/>
                <div class="item-handle-mask">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeImage(1)"></span>
                </div>
            </div>
            <div class="not-draggable" v-else>
                <input type="file" id="file-id-1" style="display:none;" accept="image/*" v-on:change="fileUpload1"/>
                <label for="file-id-1" class="file-button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span style="margin-top:10px">上传图片</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-item">
        <div class="item-title">
            商品背景图
        </div>
        <div class="upload-wrap">
            <div class="image-item" v-if="form.fileId2">
                <img class="item-img" :src="imgUrlHandle(form.fileId2)"/>
                <div class="item-handle-mask">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeImage(2)"></span>
                </div>
            </div>
            <div class="not-draggable" v-else>
                <input type="file" id="file-id-2" style="display:none;" accept="image/*" v-on:change="fileUpload2"/>
                <label for="file-id-2" class="file-button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span style="margin-top:10px">上传图片</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-item">
        <div class="item-title">
            页面背景图
        </div>
        <div class="upload-wrap">
            <div class="image-item" v-if="form.fileId3">
                <img class="item-img" :src="imgUrlHandle(form.fileId3)"/>
                <div class="item-handle-mask">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeImage(3)"></span>
                </div>
            </div>
            <div class="not-draggable" v-else>
                <input type="file" id="file-id-3" style="display:none;" accept="image/*" v-on:change="fileUpload3"/>
                <label for="file-id-3" class="file-button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span style="margin-top:10px">上传图片</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-item">
        <div class="item-title">
            Banner图
        </div>
        <div class="upload-wrap">
            <div class="image-item" v-if="form.fileId4">
                <img class="item-img" :src="imgUrlHandle(form.fileId4)"/>
                <div class="item-handle-mask">
                    <span class="glyphicon glyphicon-trash" aria-hidden="true" v-on:click="removeImage(4)"></span>
                </div>
            </div>
            <div class="not-draggable" v-else>
                <input type="file" id="file-id-4" style="display:none;" accept="image/*" v-on:change="fileUpload4"/>
                <label for="file-id-4" class="file-button">
                    <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                    <span style="margin-top:10px">上传图片</span>
                </label>
            </div>
        </div>
    </div>
    <div class="form-item">
        <div class="item-title">
            页面背景色
        </div>
        <input type="text" class="item-input" placeholder="请输入页面背景色，#000" v-model="form.color" maxlength="10">
        <span class="item-remark">例：#000(此为黑色)，#fff(此为白色)...</span>
    </div>
    <div class="form-item">
        <div class="item-title">
            tab文字颜色
        </div>
        <input type="text" class="item-input" placeholder="请输入tab文字颜色" v-model="form.tabFontColor"
               maxlength="10">
    </div>
    <div class="form-item">
        <div class="item-title">
            跳转地址（外部链接请使用http或https）
        </div>
        <input type="text" class="item-input" placeholder="请输入跳转地址" v-model="form.url">
        <span class="item-remark">例：https:://www.baidu.com</span>
    </div>
    <div class="form-item">
        <div class="item-title">
            排序(数字最大在最前面0~10)
        </div>
        <input type="text" class="item-input" placeholder="排序" v-model="form.sort"
        >
    </div>
    <div class="form-item">
        <div class="item-title">
            <span>*</span>开关
        </div>
        <div class="dropdown">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                @{{form.status==1?'开启':'关闭'}}
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li v-for="(item, index) in statusOptions" :key="index" v-on:click="changeStatus(item)"><a href="#">@{{item.label}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="form-item">
        <div class="item-title">
            <span>*</span>类型
        </div>
        <div class="dropdown" v-if="form.type=='auction'">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                拍卖商品
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li v-for="(item, index) in typeOptions" :key="index" v-on:click="changeType(item)"><a href="#">@{{item.label}}</a>
                </li>
            </ul>
        </div>
        <div class="dropdown" v-else-if="form.type=='plug'">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                捡漏商品
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li v-for="(item, index) in typeOptions" :key="index" v-on:click="changeType(item)"><a href="#">@{{item.label}}</a>
                </li>
            </ul>
        </div>
        <div class="dropdown" v-else-if="form.type=='special'">
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                专区商品
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                <li v-for="(item, index) in typeOptions" :key="index" v-on:click="changeType(item)"><a href="#">@{{item.label}}</a>
                </li>
            </ul>
        </div>
        <div class="dropdown" v-else>
            <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                普通商品
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                <li v-for="(item, index) in typeOptions" :key="index" v-on:click="changeType(item)"><a href="#">@{{item.label}}</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="form-btn">
        <button type="button" class="btn spinner-border" style="margin-right:20px;" v-on:click="onCancel">取消</button>
        <button type="button" class="btn btn-primary spinner-border" :disabled="submitDisabled" v-on:click="onSubmit">
            提交
        </button>
    </div>
    <input name="activity-form-json" type="hidden" value="{{ $json ?? null }}"/>
</div>

<script src="/js/vue/vue-2.7.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<script src="/js/compressor/compressor.min.js"></script>
<script src="/js/compressor/compressorUtil.js"></script>
<script src="/js/utils/ajaxFunc.js"></script>
<script>
    const ossPrefix = '{{ config('oss.url') }}';
    const json = '{{ $json ?? null }}';

    $(function () {
        let activityVm = new Vue({
            el: '#activityForm',
            data: {
                form: {
                    title: '',
                    fileId1: '',
                    fileId2: '',
                    fileId3: '',
                    fileId4: '',
                    color: '',
                    tabFontColor: '',
                    status: 1,
                    type: '',
                    url: '',
                    sort: '',
                },
                statusOptions: [{
                    value: 1,
                    label: '开启'
                }, {
                    value: 0,
                    label: '关闭'
                }],
                typeOptions: [{
                    value: 'auction',
                    label: '拍卖商品'
                }, {
                    value: 'plug',
                    label: '捡漏商品'
                }, {
                    value: 'special',
                    label: '专区商品'
                }, {
                    value: 'goods',
                    label: '普通商品'
                }],
                submitDisabled: false,
                btnTimer: 2000
            },
            methods: {
                fileUpload1(e) {
                    activityVm.commonUpload(e.target.files[0], 1)
                },
                fileUpload2(e) {
                    activityVm.commonUpload(e.target.files[0], 2)
                },
                fileUpload3(e) {
                    activityVm.commonUpload(e.target.files[0], 3)
                },
                fileUpload4(e) {
                    activityVm.commonUpload(e.target.files[0], 4)
                },
                async commonUpload(file, type) {
                    let formData = new FormData();
                    formData.append('file', file);
                    formData.append('_token', LA.token);
                    ajaxFileFunc('/admin/upload', formData, {}, res => {
                        if (type == 1) {
                            activityVm.form.fileId1 = res
                        } else if (type == 2) {
                            activityVm.form.fileId2 = res
                        } else if (type == 3) {
                            activityVm.form.fileId3 = res
                        } else if (type == 4) {
                            activityVm.form.fileId4 = res
                        }
                    })
                },
                imgUrlHandle(data) {
                    return getImgUrlFunc(data, ossPrefix)
                },
                removeImage(type) {
                    $.confirm({
                        title: '温馨提示',
                        content: '确认要删除该图片吗？',
                        buttons: {
                            '取消': function () {
                            },
                            '确认': function () {
                                if (type == 1) {
                                    activityVm.form.fileId1 = ''
                                } else if (type == 2) {
                                    activityVm.form.fileId2 = ''
                                } else if (type == 3) {
                                    activityVm.form.fileId3 = ''
                                } else if (type == 4) {
                                    activityVm.form.fileId4 = ''
                                }
                            }
                        }
                    });
                },
                changeStatus(row) {
                    activityVm.form.status = row.value;
                },
                onCancel() {
                    window.history.back();
                },
                changeType(row) {
                    activityVm.form.type = row.value;
                },
                onCancel() {
                    window.history.back();
                },
                async onSubmit() {
                    activityVm.submitDisabled = true
                    setTimeout(() => {
                        activityVm.submitDisabled = false
                    }, activityVm.btnTimer);

                    if (!activityVm.form.title) {
                        $.alert('请输入活动名称');
                    }

                    let params = {
                        title: activityVm.form.title,
                        topFileId: activityVm.form.fileId1 || null,
                        goodsFileId: activityVm.form.fileId2 || null,
                        pageFileId: activityVm.form.fileId3 || null,
                        bannerFileId: activityVm.form.fileId4 || null,
                        pageColor: activityVm.form.color || null,
                        tabFontColor: activityVm.form.tabFontColor || null,
                        isShow: activityVm.form.status,
                        type: activityVm.form.type,
                        url: activityVm.form.url,
                        sort: activityVm.form.sort,
                        _token: LA.token
                    }
                    if (activityVm.form.serialNumber) params.serialNumber = activityVm.form.serialNumber

                    ajaxPostFunc('/admin/activityZone/save', params, {}, res => {
                        $.alert('保存成功');
                        window.location.href = '/admin/activityZone'
                    })
                }
            },
            mounted() {
                setTimeout(() => {
                    if (json) {
                        // 编辑
                        let formJson = JSON.parse($("input[name='activity-form-json']").val())

                        activityVm.form = {
                            serialNumber: formJson.serial_number,
                            title: formJson.title,
                            fileId1: formJson.top_file_id,
                            fileId2: formJson.goods_file_id,
                            fileId3: formJson.page_file_id,
                            fileId4: formJson.banner_file_id,
                            color: formJson.page_color,
                            tabFontColor: formJson.tab_font_color,
                            status: formJson.is_show,
                            type: formJson.type,
                            url: formJson.url,
                            sort: formJson.sort
                        }
                    }
                }, 500);
            }
        })
    })
</script>

<style scoped>
    .activity-form {
        background-color: #fff;
        padding: 20px 10px;
    }

    .activity-form .form-item {
        display: flex;
        align-items: center;
    }

    .activity-form .form-item:not(:nth-child(1)) {
        margin-top: 20px;
    }

    .form-item .item-title {
        width: 100px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        margin-right: 20px;
    }

    .form-item .item-title span {
        color: red;
    }

    .form-item .item-input {
        width: 300px;
        line-height: 30px;
        padding: 0 10px;
    }

    .form-item .item-remark {
        flex: 1;
        margin-left: 20px;
    }

    .form-btn {
        text-align: right;
        margin-top: 30px;
    }
</style>
